{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "b5c9c564",
   "metadata": {},
   "source": [
    "# javascript 的表单提交"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "ef60e21c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<form action=\"javascript:;\" onsubmit=\"alert(user.value);\"> \n",
       "Username: <input type=\"text\" name=\"user\" pattern=\"[a-z]*\" title=\"用户名只能是小写字母组成\">\n",
       "<input type=\"submit\" value=\"Submit\">\n",
       "</form>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<form action=\"javascript:;\" onsubmit=\"alert(user.value);\"> \n",
    "Username: <input type=\"text\" name=\"user\" pattern=\"[a-z]*\" title=\"用户名只能是小写字母组成\">\n",
    "<input type=\"submit\" value=\"Submit\">\n",
    "</form>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c3cfbd6f",
   "metadata": {},
   "source": [
    "# jupyter notebook 里的文件下载"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8cb7145d",
   "metadata": {},
   "source": [
    "## 方法一\n",
    "一般来说，如果这个路径是文件存储的正确路径，就可以通过右键点击另存为进行下载"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "70b3a775",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<a href='第3周的配套代码.ipynb' target='_blank'>第3周的配套代码.ipynb</a><br>"
      ],
      "text/plain": [
       "/mnt/c/Users/20210817/Desktop/代码训练_2022/source/code/第3周/第3周的配套代码.ipynb"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import FileLink\n",
    "FileLink(\"第3周的配套代码.ipynb\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "17362374",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<a href='sample.zip' target='_blank'>sample.zip</a><br>"
      ],
      "text/plain": [
       "/mnt/c/Users/20210817/Desktop/代码训练_2022/source/code/第3周/sample.zip"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from zipfile import ZipFile\n",
    "from pathlib import Path\n",
    "zipname = 'sample.zip'\n",
    "path = Path()\n",
    "\n",
    "filenames = path.glob(pattern='*.ipynb')\n",
    "with ZipFile(zipname, 'w') as zipf:\n",
    "    for name in filenames:\n",
    "        zipf.write(name)\n",
    "FileLink(zipname)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "d54e05f8",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<a href='/mnt/c/Users/20210817/Desktop/代码训练_2022/source/code/第3周/sample.zip' target='_blank'>/mnt/c/Users/20210817/Desktop/代码训练_2022/source/code/第3周/sample.zip</a><br>"
      ],
      "text/plain": [
       "/mnt/c/Users/20210817/Desktop/代码训练_2022/source/code/第3周/sample.zip"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from shutil import make_archive\n",
    "FileLink(make_archive('sample', 'zip', \".\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c2dd66b9",
   "metadata": {},
   "source": [
    "## 方法二\n",
    "直接下载内存中的文件，这种方法在 notebook 导出成 html 之后也是可以支持文件下载的"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "be0fbd7a",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/png": "iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAWElEQVR4nO3OwQ0AEAAAMUxudDt4nEjaCTrHHt9ZrwM3pCvSFemKdEW6Il2RrkhXpCvSFemKdEW6Il2RrkhXpCvSFemKdEW6Il2RrkhXpCvSFemKdEW6cgBSjQD4bKP4HgAAAABJRU5ErkJggg==\n",
      "text/plain": [
       "<PIL.Image.Image image mode=RGB size=60x60 at 0x7F4B47ED26A0>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import PIL.Image\n",
    "image = PIL.Image.new(\"RGB\",(60,60),\"green\")\n",
    "image"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "2f6563c3",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "b'\\x89PNG\\r\\n\\x1a\\n\\x00\\x00\\x00\\rIHDR\\x00\\x00\\x00<\\x00\\x00\\x00<\\x08\\x02\\x00\\x00\\x00\\xb5\\x9eN%\\x00\\x00\\x00XIDATx\\x9c\\xed\\xce\\xc1\\r\\x00\\x10\\x00\\x001Lnt;x\\x9cH\\xda\\t:\\xc7\\x1e\\xdfY\\xaf\\x037\\xa4+\\xd2\\x15\\xe9\\x8atE\\xba\"]\\x91\\xaeHW\\xa4+\\xd2\\x15\\xe9\\x8atE\\xba\"]\\x91\\xaeHW\\xa4+\\xd2\\x15\\xe9\\x8atE\\xba\"]\\x91\\xaeHW\\xa4+\\xd2\\x15\\xe9\\x8atE\\xbar\\x00R\\x8d\\x00\\xf8l\\xa3\\xf8\\x1e\\x00\\x00\\x00\\x00IEND\\xaeB`\\x82'\n"
     ]
    }
   ],
   "source": [
    "image.save(\"1.png\", format=\"png\")\n",
    "with open(\"1.png\",\"rb\") as f:\n",
    "    print(f.read())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "53a4cee4",
   "metadata": {},
   "outputs": [],
   "source": [
    "import io\n",
    "fp = io.BytesIO()\n",
    "image.save(fp, format=\"png\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "467b0f6a",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "b'\\x89PNG\\r\\n\\x1a\\n\\x00\\x00\\x00\\rIHDR\\x00\\x00\\x00<\\x00\\x00\\x00<\\x08\\x02\\x00\\x00\\x00\\xb5\\x9eN%\\x00\\x00\\x00XIDATx\\x9c\\xed\\xce\\xc1\\r\\x00\\x10\\x00\\x001Lnt;x\\x9cH\\xda\\t:\\xc7\\x1e\\xdfY\\xaf\\x037\\xa4+\\xd2\\x15\\xe9\\x8atE\\xba\"]\\x91\\xaeHW\\xa4+\\xd2\\x15\\xe9\\x8atE\\xba\"]\\x91\\xaeHW\\xa4+\\xd2\\x15\\xe9\\x8atE\\xba\"]\\x91\\xaeHW\\xa4+\\xd2\\x15\\xe9\\x8atE\\xbar\\x00R\\x8d\\x00\\xf8l\\xa3\\xf8\\x1e\\x00\\x00\\x00\\x00IEND\\xaeB`\\x82'\n"
     ]
    }
   ],
   "source": [
    "print(fp.getvalue())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "e917211d",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<a download=\"1.png\" href='#' id=\"png_1\">Download</a>\n",
       "<script>\n",
       "\n",
       "function get_ref(){\n",
       "    let data = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 60, 0, 0, 0, 60, 8, 2, 0, 0, 0, 181, 158, 78, 37, 0, 0, 0, 88, 73, 68, 65, 84, 120, 156, 237, 206, 193, 13, 0, 16, 0, 0, 49, 76, 110, 116, 59, 120, 156, 72, 218, 9, 58, 199, 30, 223, 89, 175, 3, 55, 164, 43, 210, 21, 233, 138, 116, 69, 186, 34, 93, 145, 174, 72, 87, 164, 43, 210, 21, 233, 138, 116, 69, 186, 34, 93, 145, 174, 72, 87, 164, 43, 210, 21, 233, 138, 116, 69, 186, 34, 93, 145, 174, 72, 87, 164, 43, 210, 21, 233, 138, 116, 69, 186, 114, 0, 82, 141, 0, 248, 108, 163, 248, 30, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]); // \"Hello\" in binary form\n",
       "    let blob = new Blob([data], {type: 'text/plain'});\n",
       "    return URL.createObjectURL(blob);\n",
       "}\n",
       "\n",
       "\n",
       "png_1.href = get_ref()\n",
       "</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import jinja2\n",
    "from IPython.display import *\n",
    "tempalte = jinja2.Template(\n",
    "'''\n",
    "<a download=\"{{file_name}}\" href='#' id=\"{{id}}\">Download</a>\n",
    "<script>\n",
    "\n",
    "function get_ref(){\n",
    "    let data = new Uint8Array({{data}}); // \"Hello\" in binary form\n",
    "    let blob = new Blob([data], {type: 'text/plain'});\n",
    "    return URL.createObjectURL(blob);\n",
    "}\n",
    "\n",
    "\n",
    "{{id}}.href = get_ref()\n",
    "</script>\n",
    "''')\n",
    "HTML(tempalte.render(file_name = \"1.png\", data = list(fp.getvalue()), id=\"png_1\"))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "984add9c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>0</th>\n",
       "      <th>1</th>\n",
       "      <th>2</th>\n",
       "      <th>3</th>\n",
       "      <th>4</th>\n",
       "      <th>5</th>\n",
       "      <th>6</th>\n",
       "      <th>7</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>-1.651357</td>\n",
       "      <td>-0.045449</td>\n",
       "      <td>1.307206</td>\n",
       "      <td>-0.922529</td>\n",
       "      <td>-0.064564</td>\n",
       "      <td>0.395843</td>\n",
       "      <td>0.861351</td>\n",
       "      <td>-0.192915</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>-0.597175</td>\n",
       "      <td>1.366096</td>\n",
       "      <td>-0.099207</td>\n",
       "      <td>-1.799671</td>\n",
       "      <td>-1.209011</td>\n",
       "      <td>0.709071</td>\n",
       "      <td>-0.408958</td>\n",
       "      <td>-1.251483</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>-1.485897</td>\n",
       "      <td>-0.615799</td>\n",
       "      <td>0.366683</td>\n",
       "      <td>-1.071424</td>\n",
       "      <td>-0.387669</td>\n",
       "      <td>1.530043</td>\n",
       "      <td>-0.278084</td>\n",
       "      <td>0.009883</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>0.667901</td>\n",
       "      <td>-1.476273</td>\n",
       "      <td>-0.277340</td>\n",
       "      <td>-0.949970</td>\n",
       "      <td>0.686127</td>\n",
       "      <td>0.836436</td>\n",
       "      <td>0.255252</td>\n",
       "      <td>-0.022663</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>0.302051</td>\n",
       "      <td>0.079874</td>\n",
       "      <td>-2.131405</td>\n",
       "      <td>1.492238</td>\n",
       "      <td>1.569163</td>\n",
       "      <td>0.162889</td>\n",
       "      <td>-0.145285</td>\n",
       "      <td>0.359233</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>5</th>\n",
       "      <td>-1.896672</td>\n",
       "      <td>-0.640861</td>\n",
       "      <td>-0.553724</td>\n",
       "      <td>-0.952766</td>\n",
       "      <td>2.620619</td>\n",
       "      <td>0.418343</td>\n",
       "      <td>-0.118528</td>\n",
       "      <td>0.699655</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>6</th>\n",
       "      <td>-0.719685</td>\n",
       "      <td>-0.260198</td>\n",
       "      <td>-0.053706</td>\n",
       "      <td>-1.641472</td>\n",
       "      <td>0.115416</td>\n",
       "      <td>1.038825</td>\n",
       "      <td>1.060195</td>\n",
       "      <td>-0.607004</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>7</th>\n",
       "      <td>1.357553</td>\n",
       "      <td>1.142720</td>\n",
       "      <td>2.576588</td>\n",
       "      <td>-0.466476</td>\n",
       "      <td>-0.611612</td>\n",
       "      <td>0.874419</td>\n",
       "      <td>1.393489</td>\n",
       "      <td>-0.774394</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "          0         1         2         3         4         5         6  \\\n",
       "0 -1.651357 -0.045449  1.307206 -0.922529 -0.064564  0.395843  0.861351   \n",
       "1 -0.597175  1.366096 -0.099207 -1.799671 -1.209011  0.709071 -0.408958   \n",
       "2 -1.485897 -0.615799  0.366683 -1.071424 -0.387669  1.530043 -0.278084   \n",
       "3  0.667901 -1.476273 -0.277340 -0.949970  0.686127  0.836436  0.255252   \n",
       "4  0.302051  0.079874 -2.131405  1.492238  1.569163  0.162889 -0.145285   \n",
       "5 -1.896672 -0.640861 -0.553724 -0.952766  2.620619  0.418343 -0.118528   \n",
       "6 -0.719685 -0.260198 -0.053706 -1.641472  0.115416  1.038825  1.060195   \n",
       "7  1.357553  1.142720  2.576588 -0.466476 -0.611612  0.874419  1.393489   \n",
       "\n",
       "          7  \n",
       "0 -0.192915  \n",
       "1 -1.251483  \n",
       "2  0.009883  \n",
       "3 -0.022663  \n",
       "4  0.359233  \n",
       "5  0.699655  \n",
       "6 -0.607004  \n",
       "7 -0.774394  "
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import pandas as pd\n",
    "import numpy as np\n",
    "df = pd.DataFrame(np.random.randn(8,8))\n",
    "df"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "4e405477",
   "metadata": {},
   "outputs": [],
   "source": [
    "import io\n",
    "fp = io.BytesIO()\n",
    "df.to_csv(fp)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "4734ebfe",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<a download=\"1.csv\" href='#' id=\"csv_1\">Download</a>\n",
       "<script>\n",
       "\n",
       "function get_ref(){\n",
       "    let data = new Uint8Array([44, 48, 44, 49, 44, 50, 44, 51, 44, 52, 44, 53, 44, 54, 44, 55, 10, 48, 44, 45, 49, 46, 54, 53, 49, 51, 53, 54, 56, 57, 56, 55, 55, 48, 56, 48, 57, 54, 44, 45, 48, 46, 48, 52, 53, 52, 52, 57, 49, 52, 57, 51, 56, 55, 49, 49, 53, 51, 48, 54, 44, 49, 46, 51, 48, 55, 50, 48, 53, 57, 57, 49, 55, 55, 52, 56, 55, 52, 50, 44, 45, 48, 46, 57, 50, 50, 53, 50, 56, 54, 53, 51, 57, 49, 50, 53, 55, 48, 51, 44, 45, 48, 46, 48, 54, 52, 53, 54, 51, 57, 55, 52, 52, 52, 53, 53, 56, 54, 53, 57, 44, 48, 46, 51, 57, 53, 56, 52, 50, 53, 55, 56, 56, 51, 52, 52, 49, 53, 55, 54, 44, 48, 46, 56, 54, 49, 51, 53, 49, 52, 55, 50, 56, 49, 56, 57, 48, 57, 52, 44, 45, 48, 46, 49, 57, 50, 57, 49, 52, 57, 57, 49, 56, 49, 56, 54, 48, 53, 57, 10, 49, 44, 45, 48, 46, 53, 57, 55, 49, 55, 53, 49, 55, 53, 54, 53, 52, 52, 55, 57, 50, 44, 49, 46, 51, 54, 54, 48, 57, 54, 49, 51, 53, 52, 53, 52, 56, 54, 49, 55, 44, 45, 48, 46, 48, 57, 57, 50, 48, 54, 53, 50, 56, 55, 50, 52, 56, 55, 50, 50, 57, 44, 45, 49, 46, 55, 57, 57, 54, 55, 49, 49, 52, 50, 49, 55, 48, 56, 54, 50, 52, 44, 45, 49, 46, 50, 48, 57, 48, 49, 49, 50, 51, 50, 56, 51, 50, 56, 57, 55, 55, 44, 48, 46, 55, 48, 57, 48, 55, 49, 50, 48, 48, 57, 49, 53, 50, 48, 52, 54, 44, 45, 48, 46, 52, 48, 56, 57, 53, 56, 50, 54, 55, 57, 55, 56, 52, 57, 49, 49, 54, 44, 45, 49, 46, 50, 53, 49, 52, 56, 50, 53, 51, 49, 54, 54, 54, 51, 51, 53, 10, 50, 44, 45, 49, 46, 52, 56, 53, 56, 57, 54, 57, 49, 48, 51, 53, 48, 53, 48, 49, 56, 44, 45, 48, 46, 54, 49, 53, 55, 57, 57, 52, 50, 57, 49, 54, 51, 54, 54, 51, 53, 44, 48, 46, 51, 54, 54, 54, 56, 51, 51, 48, 53, 54, 50, 55, 48, 49, 53, 52, 44, 45, 49, 46, 48, 55, 49, 52, 50, 51, 53, 52, 54, 57, 53, 52, 49, 56, 49, 53, 44, 45, 48, 46, 51, 56, 55, 54, 54, 57, 51, 52, 51, 51, 53, 52, 51, 55, 53, 53, 44, 49, 46, 53, 51, 48, 48, 52, 51, 51, 56, 54, 50, 48, 54, 50, 53, 48, 52, 44, 45, 48, 46, 50, 55, 56, 48, 56, 52, 51, 57, 50, 56, 52, 51, 50, 51, 50, 54, 44, 48, 46, 48, 48, 57, 56, 56, 51, 51, 52, 48, 52, 55, 56, 57, 50, 53, 48, 49, 50, 10, 51, 44, 48, 46, 54, 54, 55, 57, 48, 49, 51, 53, 53, 51, 49, 56, 50, 49, 56, 49, 44, 45, 49, 46, 52, 55, 54, 50, 55, 51, 52, 50, 57, 50, 52, 57, 52, 48, 48, 57, 44, 45, 48, 46, 50, 55, 55, 51, 52, 48, 48, 55, 48, 55, 50, 52, 50, 51, 49, 54, 44, 45, 48, 46, 57, 52, 57, 57, 55, 48, 52, 48, 54, 51, 50, 52, 48, 52, 55, 51, 44, 48, 46, 54, 56, 54, 49, 50, 55, 52, 51, 57, 52, 51, 57, 51, 53, 51, 49, 44, 48, 46, 56, 51, 54, 52, 51, 54, 48, 49, 51, 52, 57, 50, 51, 56, 51, 49, 44, 48, 46, 50, 53, 53, 50, 53, 49, 55, 50, 56, 49, 56, 54, 52, 57, 55, 52, 44, 45, 48, 46, 48, 50, 50, 54, 54, 50, 53, 50, 56, 53, 54, 50, 52, 51, 50, 52, 49, 10, 52, 44, 48, 46, 51, 48, 50, 48, 53, 48, 57, 55, 49, 48, 49, 54, 54, 52, 51, 50, 44, 48, 46, 48, 55, 57, 56, 55, 52, 50, 56, 49, 51, 53, 55, 48, 51, 49, 56, 44, 45, 50, 46, 49, 51, 49, 52, 48, 52, 56, 52, 52, 55, 51, 53, 48, 49, 56, 50, 44, 49, 46, 52, 57, 50, 50, 51, 56, 49, 53, 53, 53, 57, 54, 53, 53, 52, 53, 44, 49, 46, 53, 54, 57, 49, 54, 50, 56, 52, 48, 54, 53, 49, 56, 52, 49, 54, 44, 48, 46, 49, 54, 50, 56, 56, 56, 54, 53, 55, 51, 56, 52, 48, 52, 57, 49, 44, 45, 48, 46, 49, 52, 53, 50, 56, 52, 57, 51, 51, 51, 52, 51, 55, 54, 49, 50, 55, 44, 48, 46, 51, 53, 57, 50, 51, 50, 55, 57, 56, 52, 53, 56, 48, 56, 48, 49, 10, 53, 44, 45, 49, 46, 56, 57, 54, 54, 55, 50, 51, 52, 50, 49, 50, 54, 55, 51, 55, 51, 44, 45, 48, 46, 54, 52, 48, 56, 54, 48, 53, 56, 56, 48, 50, 51, 56, 51, 56, 55, 44, 45, 48, 46, 53, 53, 51, 55, 50, 51, 53, 51, 48, 56, 55, 51, 48, 57, 57, 57, 44, 45, 48, 46, 57, 53, 50, 55, 54, 54, 50, 57, 48, 57, 54, 56, 52, 56, 48, 52, 44, 50, 46, 54, 50, 48, 54, 49, 57, 52, 51, 57, 49, 50, 53, 50, 52, 51, 44, 48, 46, 52, 49, 56, 51, 52, 50, 57, 49, 54, 48, 48, 56, 50, 49, 53, 52, 52, 44, 45, 48, 46, 49, 49, 56, 53, 50, 55, 53, 51, 57, 52, 50, 50, 56, 56, 56, 55, 51, 44, 48, 46, 54, 57, 57, 54, 53, 53, 51, 48, 53, 49, 55, 53, 50, 56, 52, 50, 10, 54, 44, 45, 48, 46, 55, 49, 57, 54, 56, 52, 53, 56, 49, 49, 52, 56, 56, 50, 53, 50, 44, 45, 48, 46, 50, 54, 48, 49, 57, 55, 57, 53, 54, 52, 49, 56, 54, 57, 54, 53, 44, 45, 48, 46, 48, 53, 51, 55, 48, 53, 54, 52, 51, 55, 53, 57, 50, 56, 48, 50, 56, 44, 45, 49, 46, 54, 52, 49, 52, 55, 50, 50, 56, 50, 48, 51, 52, 57, 49, 52, 54, 44, 48, 46, 49, 49, 53, 52, 49, 54, 50, 48, 52, 54, 52, 57, 49, 55, 54, 50, 53, 44, 49, 46, 48, 51, 56, 56, 50, 52, 56, 57, 56, 49, 54, 50, 52, 53, 55, 53, 44, 49, 46, 48, 54, 48, 49, 57, 52, 57, 53, 50, 49, 50, 53, 57, 48, 55, 51, 44, 45, 48, 46, 54, 48, 55, 48, 48, 51, 53, 57, 55, 57, 55, 53, 50, 49, 50, 55, 10, 55, 44, 49, 46, 51, 53, 55, 53, 53, 50, 53, 54, 52, 52, 55, 57, 51, 52, 50, 44, 49, 46, 49, 52, 50, 55, 50, 48, 48, 49, 49, 53, 48, 55, 49, 55, 55, 56, 44, 50, 46, 53, 55, 54, 53, 56, 56, 49, 50, 51, 50, 55, 48, 51, 48, 50, 44, 45, 48, 46, 52, 54, 54, 52, 55, 53, 57, 57, 54, 57, 53, 56, 52, 50, 54, 49, 44, 45, 48, 46, 54, 49, 49, 54, 49, 49, 55, 53, 52, 52, 56, 50, 49, 54, 56, 57, 44, 48, 46, 56, 55, 52, 52, 49, 56, 55, 57, 55, 53, 51, 56, 49, 54, 48, 57, 44, 49, 46, 51, 57, 51, 52, 56, 56, 56, 48, 52, 51, 56, 48, 57, 53, 56, 54, 44, 45, 48, 46, 55, 55, 52, 51, 57, 52, 51, 50, 52, 52, 57, 52, 56, 54, 55, 49, 10]); // \"Hello\" in binary form\n",
       "    let blob = new Blob([data], {type: 'text/plain'});\n",
       "    return URL.createObjectURL(blob);\n",
       "}\n",
       "\n",
       "\n",
       "csv_1.href = get_ref()\n",
       "</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(tempalte.render(file_name = \"1.csv\",data = list(fp.getvalue()), id = \"csv_1\"))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "794da3c8",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
